<template>
  <div class="cleaning_1">
    <div>
      <div style="position: absolute; top: 25px; left: 5px; color: #fff">
        <van-icon name="arrow-left" color="#ffffff" size="24" @click="back"></van-icon>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          height: 75px;
          letter-spacing: 5px;
        "
      >
        订单管理
      </div>
    </div>
    <!-- <van-tabs lineColor="#00BAAD" :list="tabList" @click="tabChange"></van-tabs> -->
    <van-search
      @clear="GetXX"
      @search="GetXX"
      margin="0 10px 20px 10px"
      height="40px"
      shape="round"
      :showAction="false"
      placeholder="请输入订单号、手机号或姓名关键词信息"
      v-model="orderNumber"
    ></van-search>
		  <div style="width: 100%; margin-bottom: 10px">
      <van-tabs
        class="van_tab"
        lineColor="#ffffff"
        :scrollable="false"
        :list="tabList"
        @click="tabChange"
        title-active-color="#ffffff"
        title-inactive-color="#ffffff"
        background="none"
      >
        <van-tab :title="item.name" v-for="item in tabList" :key="item.name"></van-tab>
      </van-tabs>
    </div>
    <div class="list_outside">
      <div class="list_head">共{{ total }}个订单</div>
      <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="onRefresh">
        <van-empty v-if="orderList.length == 0 && !error" image="search" description="未找到数据" />
        <van-empty v-if="error" image="error" description="网络错误" />
        <van-list
          style="margin-top: 10px;margin-bottom: 100px;"
          :immediate-check="false"
          v-model:loading="loading"
          :finished="finished"
          v-model:error="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="queryList"
        >
          <div class="list" v-for="(item, index) in orderList" :key="index" @click="TZXQ(item)">
            <div class="order_list">
              <div style="display: flex; justify-content: space-between">
                <div style="width: 100%">
                  <div class="title" style="display: flex; justify-content: space-between">
                    <div style="display: flex">
                      <van-icon name="calendar-fill" color="#00BAAD" size="28"></van-icon>
                      <text
                        style="color: #00baad; font-size: 18px; line-height: 30px; margin-top: 10px"
                        >{{ item.orderType }}</text
                      >
                    </div>
                    <div class="title_state">
                      <van-tag v-if="item.orderStatus == '0'" type="primary" plain>待使用</van-tag>
                      <van-tag v-if="item.orderStatus == '2'" type="warning" plain>待审核</van-tag>
                      <van-tag v-if="item.orderStatus == '1'" type="success" plain>已完成</van-tag>
                      <van-tag v-if="item.orderStatus == '-1'" type="danger" plain>已取消</van-tag>
                    </div>
                  </div>
                  <div class="item">
                    <text style="color: #606266">姓名：</text>
                    <text>{{ item.userName }}</text>
                  </div>
                  <div class="item">
                    <text style="color: #606266">订单号：</text>
                    <text>{{ item.orderNumber }}</text>
                  </div>
                  <div class="item">
                    <text style="color: #606266">下单时间：</text>
                    <text>{{ item.creationTime }}</text>
                  </div>
									<div class="item_cancel" v-if="orderStatus == '0'">
                    <div style="width: 100px">
                      <van-button
                        @click.stop="QXDD(item)"
                        size="small"
                        type="warning"
                        text="取消订单"
                      ></van-button>
                    </div>
                  </div>
                  <div class="item_cancel" v-if="orderStatus == '2'">
                    <div style="width: 100px" @click.stop="confirmApply(item)">
                      <van-button class="custom-style" size="small" text="同意申请"></van-button>
                    </div>
                    <div
                      style="width: 100px; margin-right: 10px"
                      @click.stop="cancelApply(item)"
                    >
                      <van-button size="small" type="warning" text="拒绝申请"></van-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template #error>
            <div class="error-tip" @click="retryLoad">
              <van-icon name="warning" />
              <span>加载失败，点击重试</span>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { getServiceOrderAdminList,updateServiceOrderAdmin } from "@/api/DD/index.js"
import { getpersonalInformation } from "../../common/RYXX"
import { useRouter } from "vue-router"
import { Dialog, Notify } from "vant";

const title = ref("订单管理")
const total = ref(0)
const orderList = ref([])
const DDH = ref("")
const	id = ref("")
const	orderStatus = ref("0")
const orderType = ref()
const applyStatusNameFirst = ref("")
const applyStatusNameSecond = ref("")
const postId =ref(JSON.parse(getpersonalInformation()).postId) 
const orderNumber = ref("") // 可接收订单编号手机号姓名
const router = useRouter()
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const pageData = ref({
  pageNumber: 1,
  pageSize: 10
})
const tabList = ref([
  {
    name: "待使用",
    orderStatus: "0"
  },
  {
    name: "已取消",
    orderStatus: "-1"
  },
  {
    name: "已完成",
    orderStatus: "1"
  },
  {
    name: "待审核",
    orderStatus: "2"
  },
  {
    name: "全部",
    orderStatus: "-1,0,1,2,3,4"
  }
])
const TZXQ = (val) => {
  let li = encodeURIComponent(JSON.stringify(val))
  router.push("/pages/AdminPages/DDXQ/index?YYXQxx=" + li)
}
const GetXX = () => {
	queryList()
}
const tabChange = (item) => {
  orderStatus.value = tabList.value[item].orderStatus
  pageData.value = {
  pageNumber: 1,
  pageSize: 10
}
  onRefresh();
}
const queryList = (val, val2) => {
  loading.value = true
  if (error.value) return // 如果当前是错误状态，不自动触发加载
  if (refreshing.value) {
    orderList.value = []
  }
  getServiceOrderAdminList({
    userId: JSON.parse(getpersonalInformation()).userId,
    orderStatus: orderStatus.value,
    postId: postId.value,
    pageNumber: pageData.value.pageNumber,
    pageSize: pageData.value.pageSize,
    siteId: "",
    orderNumber: orderNumber.value,
    orderTime: ""
  })
    .then((res) => {
      loading.value = false
      if (res.resultMessage != "SUCCESS") {
        orderList.value = []
        error.value = true // 显示错误提示
      } else if (res.data.length == 0) {
        orderList.value = []
        finished.value = true
      } else {
        total.value = res.pageNum
        let dataList = res.data
        orderList.value = [...orderList.value, ...dataList]
      }
      // 判断是否已加载完所有数据
      if (orderList.value.length == res.pageNum) {
        finished.value = true
      } else {
        pageData.value.pageNumber++
      }
      refreshing.value = false
    })
    .catch((err) => {
      console.log(err)
    })
}
queryList()
const QXDD =(val)=> {
				id.value = val.id
				DDH.value = val.orderNumber
				orderType.value = val.orderType
				Dialog.confirm({
      title: "确认审核",
      message: `订单号为：${DDH.value}（取消后本订单将失效）`,
    })
      .then(() => {
        updateServiceOrderAdmin({
          serviceType: orderType.value,
          orderStatus: "-1",
          id: id.value,
        }).then((res) => {
          Notify({ type: "success", message: "取消成功" });
          onRefresh();
        });
      })
      .catch(() => {
        // on cancel
      });
			}
    const cancelApply =(item)=> {
				id.value = item.id;
				DDH.value = item.orderNumber;
				orderType.value = item.orderType;
				applyStatusNameFirst.value = "拒绝申请";
				applyStatusNameSecond.value = "变更为待使用";
				sh()
			}

		const	confirmApply = (item)=> {
				id.value = item.id;
				DDH.value = item.orderNumber;
				orderType.value = item.orderType;
				applyStatusNameFirst.value = "同意申请";
				applyStatusNameSecond.value = "失效";
				sh()
			}
			const sh = () =>{
			Dialog.confirm({
      title: "确认审核",
      message: `订单号为：${DDH.value}（确认后本订单将'${applyStatusNameSecond.value}'）`,
    })
      .then(() => {
        updateServiceOrderAdmin({
          serviceType: orderType.value,
          orderStatus: "-1",
          id: id.value,
        }).then((res) => {
          Notify({ type: "success", message: "取消成功" });
          onRefresh();
        });
      })
      .catch(() => {
        // on cancel
      });
			}
const onRefresh = () => {
  orderList.value = [];
  pageData.value.pageNumber = 1
  pageData.value.pageSize = 10
  finished.value = false
  error.value = false
  loading.value = true
  refreshing.value = true
  queryList()
}
const retryLoad = () => {
  error.value = false
  loading.value = true
  queryList()
}
const back = ()=> {
				router.back()
			}
</script>

<style lang="scss" scoped>
.cleaning_1 {
  height: 100%;
  width: 100%;
  background: url("../../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.list_outside {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  padding-bottom: 15px;
}

.list_head {
  margin: 0 0 10px 20px;
  padding-top: 10px;
  color: #999999;
  font-size: 14px;
}

.list {
  padding: 0px 10px 10px 10px;
  box-sizing: border-box;
}

.order_list {
  border-radius: 10px;
  padding: 0px 10px 10px 10px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;

  .item {
    font-size: 15px;
    margin: 5px 0 5px 0;
  }

  .item_cancel {
    display: flex;
    flex-direction: row-reverse;
  }
}

.custom-style {
  color: #fff;
  background: #36c2a8;
}
.van-search {
  background: none;
}
.van_tab {
  --van-tabs-bottom-bar-color: #00baad;
}
.pull-refresh {
  height: calc(var(--real-vh, 1vh) * 100 - 210px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  padding-top: 10px;
  box-sizing: border-box;
}
</style>
